<template>
  <div>
    <div>
      <div v-if="loading">Loading...</div>
      <!-- 判断状态为空时展示 -->
      <div v-if="show">
        <van-empty description="无可用数据">
          <van-button class="btn">健康科普</van-button>
          <van-button class="btn" @click="zhuan">咨询专家</van-button>
          <van-button class="btn" @click="gua">医院挂号</van-button>
          <van-button class="btn">线上购药</van-button>
          <span @click="feedback" class="feedback">我要反馈</span>
        </van-empty>
      </div>
      <!-- 数据不为空时展示 -->

      <div class="navtab" v-if="booknav.length !== 0">
        <div class="nav-zong">
          <h4>共找到相关结果{{ booknav.length }}条</h4>
        </div>
        <div v-for="(item, index) in booknav" :key="index" class="nav-for">
          <div class="titletext">{{ item.texttitle }}</div>
          <div class="wordtext">{{ item.textdescword }}</div>
          <div class="textdoc">
            <div>{{ item.textname }}</div>
            <div>{{ item.textcitys }}医院</div>
            <div>{{ item.textdoction }}</div>
            <div>{{ item.texttype }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from '@/utils/axios/axios';
const show = ref(false);
const booknav = ref([]);
const loading = ref(true);
const route = useRoute();

const items = ref(JSON.parse(route.query.items));
const SearchQuery = ref('');
const router = useRouter();
// 判断是否存在后端数据如果有xaios传到前端
const booklist = async () => {
  await axios.get('/api/bookslists').then((res) => {
    SearchQuery.value = items.value;
    booknav.value = res.data.res.filter((s) => s.texttitle.includes(SearchQuery.value));
  });
};
booklist();
onMounted(async () => {
  try {
  const userlist = async()=>{
    await axios.get('/api/bookslists').then((res)=>{
    datalist.value = res.data.res.splice(3, 3);
    console.log(res);
    
  }) 
userlist()
  }
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    loading.value = false;
  }
});
const Xiang = () => {
  console.log(111);
};
// 跳转专家询问
const zhuan = () => {
  router.push('/layout/popular');
};
// 医院挂号
const gua = () => {
  router.push('/layout/appointment');
};
</script>

<style scoped lang="scss">
.list-item {
  width: 90%;
  height: 18vh;
  background: #d2e9eb;
  border-radius: 10px;
}
.navtab {
  width: 93%;
  height: 237px;
  border-radius: 10px;
  margin: auto;
  background: #ffffff;
  .nav-zong {
    font-size: 0.4rem;
    h4 {
      float: left;
      margin: 12px;
    }
    > div {
      float: right;
      margin: 12px;
    }
  }
  .nav-for {
    clear: both;
    width: 95%;
    margin: auto;
    height: 90px;
    line-height: 20px;
    margin-bottom: 10px;
    .titletext {
      font-size: 0.36rem;
    }
    .wordtext {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 限制显示的行数 */
      -webkit-box-orient: vertical;
    }
  }
  .textdoc {
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    > div:nth-child(4) {
      color: #00be8c;
    }
  }
}
.btn {
  width: 80px;
  height: 30px;
  float: left;
  border: none;
  border: 1px solid blue;
  color: blue;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 5px;
}

.feedback {
  color: blue;
  font-size: 14px;
  border-bottom: 2px solid blue;
  position: absolute;
  top: 80%;
  left: 42%;
}

.listTab2 {
  text-align: center;
}

.listTab2_box {
  width: 90%;
  height: 15vh;
  margin-left: 5%;
  background-color: #ccc;
  border-radius: 15px;
  margin-top: 5px;
}

.tit {
  font-size: 20px;
  text-align: center;
}

.biao_list {
  font-size: 15px;
  width: 330px;
  overflow: hidden;
  height: 5vh;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.footer_name {
  background-color: #ccc;
  margin-left: 5px;
  font-size: 14px;
}
.Xiang {
  color: blue;
}
</style>